<template>
	<view class="page" :class="{gold: aiList.length > 0 && isGpt4(activeAiIndex)}">
		<uv-tabs class="tabs" :list="aiList" :current="activeAiIndex" @click="onTabChange" key-name="alias" line-color="#04BABE" :activeStyle="{ color: '#1b1b1b', fontWeight: 'bold', fontSize: '15px'}" :inactiveStyle="{ color: '#1b1c1c', fontSize: '14px'}"></uv-tabs>

		<swiper class="lists" :current="activeAiIndex" :duration="300" @change="onSwiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in aiList" :key="index">
				<writeMsgList ref="msgList" :ai-name="item.name" :ai-index="index" :active-ai-index="activeAiIndex" :prompt-id="prompt_id" :welcome="welcome" :user-avatar="userAvatar" :ai-avatar="aiAvatar" @setMessage="setMessage"></writeMsgList>
			</swiper-item>
		</swiper>
		<view class="box-input">
			<!-- <view class="tools">
			            <button class="btn-tool" @tap="showSetting">
					<image model="widthFix" src="/static/images/ic_input_setting.png"></image>
				</button>
			</view> -->
			<view class="input">
				<textarea type="text" v-model="message" :fixed="true" :auto-height="true" :placeholder="prompt.hint" maxlength="-1" cursor-spacing="0" @focus="inputFocus" :style="'min-height:' + inputHeight + 'rpx;'"></textarea>
				<button type="submit" class="btn-send" @click="sendText">
					<image src="/static/images/ic_send.png"></image>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				isLogin: false,
				prompt_id: 0,
				prompt: {},
				message: '',
				lang: '简体中文',
				inputHeight: 40,
				safeAreaHeight: 0,
				hasModel4: false,
				model4Name: '高级版',
				userinfo: {},
				aiList: [],
				activeAiIndex: 0
			};
		},
		computed: {
			welcome() {
				return {
					title: this.prompt.title,
					desc: this.prompt.welcome ? this.prompt.welcome : this.prompt.hint,
					tips: this.prompt.tips
				}
			},
			userAvatar() {
				if (this.userinfo && this.userinfo.avatar) {
					return this.userinfo.avatar
				} else {
					return '/static/img/ic_user.png'
				}
			},
			aiAvatar() {
				return '/static/img/ic_ai.png'
			}
		},
		onLoad(options) {
			if (options.sid) {
				// 分享id
				uni.setStorageSync('sid', options.sid);
			}
			if (options.prompt_id) {
				this.setData({
					prompt_id: parseInt(options.prompt_id)
				})
			} else if (options.id) {
				this.setData({
					prompt_id: parseInt(options.id)
				})
			}

			if (window.$lang != 'zh-cn') {
				this.setData({
					lang: 'English',
					langs: ['English', '简体中文', '繁体中文'],
				})
			}

			this.setData({
				safeAreaHeight: app.globalData.safeAreaHeight
			});

			app.globalData.util.getSetting().then(setting => {
				this.setData({
					hasModel4: setting.hasModel4,
					model4Name: setting.model4Name,
					aiList: setting.aiList
				})
				const ai = uni.getStorageSync('ai')
				if (ai) {
					setting.aiList.forEach((item, index) => {
						if (item.name === ai) {
							this.switchAi(index)
						}
					})
				}
			})

			this.getPrompt();
			app.globalData.util.checkLogin().then(() => {
				this.setData({
					isLogin: true
				})
				this.getUserInfo();
			});
		},
		methods: {
			inputFocus() {
				if (!this.isLogin) {
					app.globalData.util.toLogin(this.$lang('请登录'))
					return
				}
			},
			sendText() {
				this.$refs.msgList[this.activeAiIndex].sendText(this.message, this.lang)
			},
			sendConfirm() {
				setTimeout(() => {
					this.sendText()
				}, 50)
			},
			setMessage(message) {
				this.message = message
			},
			quickMessage(text) {
				this.message = text
			},
			showInput() {
				this.inputShow = !this.inputShow
				setTimeout(() => {
					this.scrollBottom()
				}, 300)
			},
			changeLang(lang) {
				this.lang = lang
				app.globalData.util.message('已切换为【' + lang + '】输出')
				this.inputShow = true
			},
			getPrompt() {
				app.globalData.util.request({
					url: '/write/getPrompt',
					data: {
						prompt_id: this.prompt_id
					}
				}).then(res => {
					const prompt = res.data
					document.title = prompt.title
					this.setData({
						prompt: prompt
					})
					let inputHeight = 40;
					if (prompt.hint) {
						if (prompt.hint.length > 19) {
							inputHeight = 80;
						} else if (prompt.hint.length > 38) {
							inputHeight = 120;
						}
					}
					this.setData({
						inputHeight: inputHeight
					})
				})
			},
			getUserInfo() {
			    app.globalData.util
			        .request({
			            url: '/user/info',
						loading: false
			        })
			        .then((res) => {
			            this.setData({
			                userinfo: res.data
			            });
			        }).catch(res => {

					})
			},
			onTabChange(item) {
				this.switchAi(item.index)
			},
			onSwiperChange(e) {
				let index = e.target.current || e.detail.current
				this.switchAi(index)
			},
			switchAi(index) {
				if (this.isGpt4(index)) {
					app.globalData.util.message(window.langTrans('已进入【' + this.model4Name +'】'))
				}
				this.activeAiIndex = index
				uni.setStorage('ai', this.aiList[index].name)
			},
			isGpt4(index) {
				const name = this.aiList[index].name
        return app.globalData.util.isGpt4(name)
			}
		}
	};
</script>
<style lang="scss">
	.page {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: hidden;

		.tabs {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 88rpx;
		}

		.lists {
			position: absolute;
			left: 0;
			right: 0;
			top: 88rpx;
			bottom: 140rpx;
			width: 100%;
			height: auto;
		}

		.box-input {
			width: 100%;
			padding: 30rpx 30rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			border-top: 1px solid #eee;
			background: #fff;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

		.box-input .tools {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

		.box-input .tools .btn-tool {
		    width: 80rpx;
		    height: 80rpx;
		    padding: 0;
		    border: none;
		    border-radius: 40rpx;
		    background: none;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    background: #fff;
		    border: 4rpx solid #dae0e0;
		    margin-right: 20rpx;
		}

		.box-input .tools .btn-tool image {
		    width: 48rpx;
		    height: 48rpx;
		}

		.box-input .input {
			width: 690rpx;
			padding: 0;
			position: relative;
			box-sizing: border-box;
			overflow: hidden;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}

		.box-input .input textarea {
			width: 590rpx;
			padding: 18rpx 10rpx 18rpx 24rpx;
			line-height: 40rpx;
			max-height: 800rpx;
			overflow-x: hidden;
			overflow-y: auto;
			color: #4c4d52;
			border: 4rpx solid #04BABE;
			border-radius: 40rpx;
			background: #f6ffff;
			font-size: 28rpx;
		}

		.box-input .input .btn-send {
			width: 80rpx;
			height: 80rpx;
			padding: 0;
			border: none;
			background: none;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9;
			margin-left: 20rpx;
		}

		.box-input .input .btn-send::after {
			display: none;
		}

		.box-input .input .btn-send image {
		    width: 100%;
			height: 100%;
		}
	}

	.gold {
		.box-input {
			.input {
				textarea {
					border-color:#ffa41a;
				}
			}
		}
	}
</style>
